<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员搜索 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        
        .search-container {
            transition: all 0.3s ease;
        }
        
        .search-container:focus-within {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .filter-panel {
            background-color: #ffffff;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        }
        
        .filter-title {
            font-weight: 600;
            color: #334155;
        }
        
        .member-card {
            transition: all 0.2s ease;
        }
        
        .member-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        .badge-pill {
            font-size: 0.75rem;
            padding: 0.25rem 0.6rem;
        }
        
        .search-tag {
            background-color: #eff6ff;
            color: #2563eb;
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            font-size: 0.875rem;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .search-tag .close {
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
        }
        
        .range-slider {
            width: 100%;
            accent-color: #3b82f6;
        }
        
        .sort-btn {
            transition: all 0.15s ease;
        }
        
        .sort-btn.active {
            background-color: #3b82f6;
            color: white;
        }
        
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        
        .custom-checkbox:checked {
            background-color: #3b82f6;
            border-color: #3b82f6;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <i class="fas fa-users"></i>
                <span>社交平台</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">会员中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">消息</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-outline-light">
                        <i class="fas fa-bell"></i>
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle rounded-circle" type="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" width="36" height="36" class="rounded-circle">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人中心</a></li>
                            <li><a class="dropdown-item" href="#">我的关注</a></li>
                            <li><a class="dropdown-item" href="#">设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container py-5">
        <!-- 页面标题 -->
        <div class="mb-6">
            <h1 class="h2 mb-2">会员搜索</h1>
            <p class="text-muted">发现并连接志同道合的朋友</p>
        </div>

        <!-- 基础搜索栏 -->
        <div class="card mb-6 search-container">
            <div class="card-body p-4">
                <div class="row gap-3">
                    <div class="col-md-8">
                        <div class="input-group">
                            <input type="text" class="form-control form-control-lg" placeholder="搜索会员名称、标签或简介...">
                            <button class="btn btn-primary btn-lg">
                                <i class="fas fa-search me-2"></i>搜索
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex gap-2">
                            <button class="btn btn-outline-primary flex-grow-1" data-bs-toggle="collapse" data-bs-target="#advancedSearch">
                                <i class="fas fa-sliders-h me-1"></i>高级筛选
                            </button>
                            <button class="btn btn-outline-secondary">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 已选搜索条件 -->
                <div class="mt-3 d-flex flex-wrap gap-2">
                    <div class="search-tag">
                        地点: 北京 <span class="close">&times;</span>
                    </div>
                    <div class="search-tag">
                        兴趣: 摄影 <span class="close">&times;</span>
                    </div>
                    <div class="search-tag">
                        粉丝: 1k-10k <span class="close">&times;</span>
                    </div>
                </div>
            </div>
            
            <!-- 高级搜索选项 -->
            <div id="advancedSearch" class="collapse border-top p-4 bg-gray-50">
                <div class="row gap-4">
                    <div class="col-md-4">
                        <label class="form-label filter-title mb-2">会员类型</label>
                        <div class="d-flex flex-wrap gap-2">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input custom-checkbox" type="checkbox" id="type-creator">
                                <label class="form-check-label" for="type-creator">内容创作者</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input custom-checkbox" type="checkbox" id="type-expert">
                                <label class="form-check-label" for="type-expert">行业专家</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input custom-checkbox" type="checkbox" id="type-organization">
                                <label class="form-check-label" for="type-organization">机构账号</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input custom-checkbox" type="checkbox" id="type-new">
                                <label class="form-check-label" for="type-new">新会员</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <label class="form-label filter-title mb-2">活跃时间</label>
                        <select class="form-select">
                            <option value="">不限</option>
                            <option value="today">今天活跃</option>
                            <option value="week">本周活跃</option>
                            <option value="month">本月活跃</option>
                            <option value="quarter">近3个月</option>
                        </select>
                    </div>
                    
                    <div class="col-md-4">
                        <label class="form-label filter-title mb-2">所在地</label>
                        <div class="row gap-2">
                            <div class="col-6">
                                <select class="form-select">
                                    <option value="">省份</option>
                                    <option value="beijing">北京</option>
                                    <option value="shanghai">上海</option>
                                    <option value="guangdong">广东</option>
                                    <!-- 更多省份 -->
                                </select>
                            </div>
                            <div class="col-6">
                                <select class="form-select">
                                    <option value="">城市</option>
                                    <option value="beijing">北京市</option>
                                    <option value="haidian">海淀区</option>
                                    <option value="chaoyang">朝阳区</option>
                                    <!-- 更多城市 -->
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <label class="form-label filter-title mb-2">粉丝数量范围</label>
                        <div class="px-1">
                            <input type="range" min="0" max="100" value="50" class="range-slider" id="fanRange">
                            <div class="d-flex justify-content-between text-sm text-muted mt-1">
                                <span>0</span>
                                <span id="fanValue">1k - 10k</span>
                                <span>100k+</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <label class="form-label filter-title mb-2">兴趣标签</label>
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge bg-primary bg-opacity-10 text-primary cursor-pointer">摄影</span>
                            <span class="badge bg-primary bg-opacity-10 text-primary cursor-pointer">音乐</span>
                            <span class="badge bg-primary bg-opacity-10 text-primary cursor-pointer">旅行</span>
                            <span class="badge bg-primary bg-opacity-10 text-primary cursor-pointer">美食</span>
                            <span class="badge bg-primary bg-opacity-10 text-primary cursor-pointer">健身</span>
                            <span class="badge bg-primary bg-opacity-10 text-primary cursor-pointer">阅读</span>
                            <span class="badge bg-primary bg-opacity-10 text-primary cursor-pointer">更多...</span>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <label class="form-label filter-title mb-2">内容质量</label>
                        <div class="d-flex gap-2">
                            <button class="btn btn-outline-secondary flex-grow-1">
                                <i class="fas fa-star text-warning"></i> 优质内容
                            </button>
                            <button class="btn btn-outline-secondary flex-grow-1">
                                <i class="fas fa-certificate text-primary"></i> 认证用户
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="d-flex justify-content-end gap-2 mt-4">
                    <button class="btn btn-outline-secondary">重置筛选</button>
                    <button class="btn btn-primary">应用筛选</button>
                </div>
            </div>
        </div>

        <!-- 搜索结果统计和排序 -->
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
            <div class="text-muted">找到 <strong>1,284</strong> 位符合条件的会员</div>
            
            <div class="d-flex gap-2">
                <span class="text-muted align-self-center">排序方式:</span>
                <button class="btn btn-sm sort-btn active">
                    推荐
                </button>
                <button class="btn btn-sm sort-btn btn-outline-secondary">
                    粉丝最多
                </button>
                <button class="btn btn-sm sort-btn btn-outline-secondary">
                    最新加入
                </button>
                <button class="btn btn-sm sort-btn btn-outline-secondary">
                    活跃度
                </button>
            </div>
        </div>

        <div class="row gap-4">
            <!-- 左侧分类筛选 -->
            <div class="col-lg-3">
                <div class="filter-panel p-4 mb-4">
                    <h5 class="filter-title mb-3">会员分类</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <a href="#" class="d-flex justify-content-between text-decoration-none text-primary fw-medium">
                                全部会员 <span class="badge bg-primary bg-opacity-10">1,284</span>
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="d-flex justify-content-between text-decoration-none text-muted">
                                摄影爱好者 <span class="badge bg-gray-100">245</span>
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="d-flex justify-content-between text-decoration-none text-muted">
                                音乐达人 <span class="badge bg-gray-100">187</span>
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="d-flex justify-content-between text-decoration-none text-muted">
                                旅行家 <span class="badge bg-gray-100">312</span>
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="d-flex justify-content-between text-decoration-none text-muted">
                                美食家 <span class="badge bg-gray-100">156</span>
                            </a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="d-flex justify-content-between text-decoration-none text-muted">
                                健身达人 <span class="badge bg-gray-100">98</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="text-decoration-none text-primary">查看更多分类 <i class="fas fa-chevron-right fa-xs ms-1"></i></a>
                        </li>
                    </ul>
                </div>
                
                <div class="filter-panel p-4 mb-4">
                    <h5 class="filter-title mb-3">活跃度</h5>
                    <div class="d-flex flex-column gap-2">
                        <div class="form-check">
                            <input class="form-check-input custom-checkbox" type="checkbox" id="active-daily" checked>
                            <label class="form-check-label" for="active-daily">
                                每日活跃
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input custom-checkbox" type="checkbox" id="active-weekly" checked>
                            <label class="form-check-label" for="active-weekly">
                                每周活跃
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input custom-checkbox" type="checkbox" id="active-monthly">
                            <label class="form-check-label" for="active-monthly">
                                每月活跃
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input custom-checkbox" type="checkbox" id="active-rarely">
                            <label class="form-check-label" for="active-rarely">
                                偶尔活跃
                            </label>
                        </div>
                    </div>
                </div>
                
                <div class="filter-panel p-4">
                    <h5 class="filter-title mb-3">加入时间</h5>
                    <div class="d-flex flex-column gap-2">
                        <div class="form-check">
                            <input class="form-check-input custom-checkbox" type="radio" name="joinTime" id="join-any">
                            <label class="form-check-label" for="join-any">
                                不限
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input custom-checkbox" type="radio" name="joinTime" id="join-week" checked>
                            <label class="form-check-label" for="join-week">
                                近一周
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input custom-checkbox" type="radio" name="joinTime" id="join-month">
                            <label class="form-check-label" for="join-month">
                                近一个月
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input custom-checkbox" type="radio" name="joinTime" id="join-quarter">
                            <label class="form-check-label" for="join-quarter">
                                近三个月
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input custom-checkbox" type="radio" name="joinTime" id="join-year">
                            <label class="form-check-label" for="join-year">
                                近一年
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧会员列表 -->
            <div class="col-lg-9">
                <!-- 视图切换 -->
                <div class="mb-4 d-flex justify-content-between align-items-center">
                    <div>
                        <button class="btn btn-sm btn-primary">
                            <i class="fas fa-th-large me-1"></i>卡片视图
                        </button>
                        <button class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-list me-1"></i>列表视图
                        </button>
                    </div>
                    
                    <div class="d-flex gap-2">
                        <span class="text-muted align-self-center">每页显示:</span>
                        <select class="form-select form-select-sm" style="width: auto;">
                            <option>12</option>
                            <option selected>24</option>
                            <option>48</option>
                        </select>
                    </div>
                </div>
                
                <!-- 会员卡片网格 -->
                <div class="row gap-4">
                    <!-- 会员卡片 1 -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card member-card h-100">
                            <div class="card-body p-4">
                                <div class="d-flex gap-3 mb-3">
                                    <img src="https://picsum.photos/id/1012/80/80" alt="会员头像" class="rounded-circle" width="64" height="64">
                                    <div>
                                        <h5 class="card-title mb-0">李明</h5>
                                        <p class="text-sm text-muted">@liming</p>
                                        <div class="d-flex gap-1 mt-1">
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">摄影</span>
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">旅行</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                    职业旅行摄影师，曾游历30多个国家，分享各地风土人情和旅行攻略。
                                </p>
                                
                                <div class="d-flex justify-content-between text-sm text-muted mb-3">
                                    <div><i class="fas fa-map-marker-alt me-1"></i> 北京</div>
                                    <div><i class="fas fa-calendar-alt me-1"></i> 加入于 2021-03</div>
                                </div>
                                
                                <div class="d-flex justify-content-between text-sm border-top pt-2">
                                    <div><span class="fw-medium">5.2k</span> 粉丝</div>
                                    <div><span class="fw-medium">342</span> 作品</div>
                                    <button class="btn btn-sm btn-outline-primary">关注</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 会员卡片 2 -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card member-card h-100">
                            <div class="card-body p-4">
                                <div class="d-flex gap-3 mb-3">
                                    <img src="https://picsum.photos/id/1027/80/80" alt="会员头像" class="rounded-circle" width="64" height="64">
                                    <div>
                                        <h5 class="card-title mb-0">王芳</h5>
                                        <p class="text-sm text-muted">@wangfang</p>
                                        <div class="d-flex gap-1 mt-1">
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">美食</span>
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">烹饪</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                    高级厨师，擅长中西融合料理，定期分享食谱和烹饪技巧，拥有自己的美食工作室。
                                </p>
                                
                                <div class="d-flex justify-content-between text-sm text-muted mb-3">
                                    <div><i class="fas fa-map-marker-alt me-1"></i> 上海</div>
                                    <div><i class="fas fa-calendar-alt me-1"></i> 加入于 2020-11</div>
                                </div>
                                
                                <div class="d-flex justify-content-between text-sm border-top pt-2">
                                    <div><span class="fw-medium">8.7k</span> 粉丝</div>
                                    <div><span class="fw-medium">156</span> 作品</div>
                                    <button class="btn btn-sm btn-success">
                                        <i class="fas fa-check me-1"></i>已关注
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 会员卡片 3 -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card member-card h-100">
                            <div class="card-body p-4">
                                <div class="d-flex gap-3 mb-3">
                                    <img src="https://picsum.photos/id/1074/80/80" alt="会员头像" class="rounded-circle" width="64" height="64">
                                    <div>
                                        <h5 class="card-title mb-0">张伟</h5>
                                        <p class="text-sm text-muted">@zhangwei</p>
                                        <div class="d-flex gap-1 mt-1">
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">写作</span>
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">文学</span>
                                            <span class="badge badge-pill bg-info bg-opacity-10 text-info">认证</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                    自由撰稿人，发表过多篇短篇小说和诗歌，专注于都市情感和生活感悟类创作。
                                </p>
                                
                                <div class="d-flex justify-content-between text-sm text-muted mb-3">
                                    <div><i class="fas fa-map-marker-alt me-1"></i> 广州</div>
                                    <div><i class="fas fa-calendar-alt me-1"></i> 加入于 2019-07</div>
                                </div>
                                
                                <div class="d-flex justify-content-between text-sm border-top pt-2">
                                    <div><span class="fw-medium">12.3k</span> 粉丝</div>
                                    <div><span class="fw-medium">89</span> 作品</div>
                                    <button class="btn btn-sm btn-outline-primary">关注</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 会员卡片 4 -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card member-card h-100">
                            <div class="card-body p-4">
                                <div class="d-flex gap-3 mb-3">
                                    <img src="https://picsum.photos/id/1062/80/80" alt="会员头像" class="rounded-circle" width="64" height="64">
                                    <div>
                                        <h5 class="card-title mb-0">刘艺</h5>
                                        <p class="text-sm text-muted">@liuyi</p>
                                        <div class="d-flex gap-1 mt-1">
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">艺术</span>
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">摄影</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                    专注于人文与风景摄影，作品曾在多个摄影展展出，擅长捕捉生活中的美好瞬间。
                                </p>
                                
                                <div class="d-flex justify-content-between text-sm text-muted mb-3">
                                    <div><i class="fas fa-map-marker-alt me-1"></i> 成都</div>
                                    <div><i class="fas fa-calendar-alt me-1"></i> 加入于 2022-05</div>
                                </div>
                                
                                <div class="d-flex justify-content-between text-sm border-top pt-2">
                                    <div><span class="fw-medium">6.2k</span> 粉丝</div>
                                    <div><span class="fw-medium">215</span> 作品</div>
                                    <button class="btn btn-sm btn-outline-primary">关注</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 会员卡片 5 -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card member-card h-100">
                            <div class="card-body p-4">
                                <div class="d-flex gap-3 mb-3">
                                    <img src="https://picsum.photos/id/1066/80/80" alt="会员头像" class="rounded-circle" width="64" height="64">
                                    <div>
                                        <h5 class="card-title mb-0">赵强</h5>
                                        <p class="text-sm text-muted">@zhaoqiang</p>
                                        <div class="d-flex gap-1 mt-1">
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">健身</span>
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">营养</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                    专业健身教练，分享科学健身方法和营养搭配建议，帮助数百人实现健身目标。
                                </p>
                                
                                <div class="d-flex justify-content-between text-sm text-muted mb-3">
                                    <div><i class="fas fa-map-marker-alt me-1"></i> 深圳</div>
                                    <div><i class="fas fa-calendar-alt me-1"></i> 加入于 2021-09</div>
                                </div>
                                
                                <div class="d-flex justify-content-between text-sm border-top pt-2">
                                    <div><span class="fw-medium">9.4k</span> 粉丝</div>
                                    <div><span class="fw-medium">78</span> 作品</div>
                                    <button class="btn btn-sm btn-outline-primary">关注</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 会员卡片 6 -->
                    <div class="col-md-6 col-lg-4">
                        <div class="card member-card h-100">
                            <div class="card-body p-4">
                                <div class="d-flex gap-3 mb-3">
                                    <img src="https://picsum.photos/id/1077/80/80" alt="会员头像" class="rounded-circle" width="64" height="64">
                                    <div>
                                        <h5 class="card-title mb-0">林画</h5>
                                        <p class="text-sm text-muted">@linhua</p>
                                        <div class="d-flex gap-1 mt-1">
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">插画</span>
                                            <span class="badge badge-pill bg-primary bg-opacity-10 text-primary">设计</span>
                                            <span class="badge badge-pill bg-success bg-opacity-10 text-success">热门</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                    自由插画师，擅长治愈系风格插画创作，承接商业插画项目，作品风格清新可爱。
                                </p>
                                
                                <div class="d-flex justify-content-between text-sm text-muted mb-3">
                                    <div><i class="fas fa-map-marker-alt me-1"></i> 杭州</div>
                                    <div><i class="fas fa-calendar-alt me-1"></i> 加入于 2022-02</div>
                                </div>
                                
                                <div class="d-flex justify-content-between text-sm border-top pt-2">
                                    <div><span class="fw-medium">4.5k</span> 粉丝</div>
                                    <div><span class="fw-medium">132</span> 作品</div>
                                    <button class="btn btn-sm btn-success">
                                        <i class="fas fa-check me-1"></i>已关注
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="mt-8 d-flex justify-content-center">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">4</a></li>
                            <li class="page-item"><a class="page-link" href="#">5</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-6">
                    <h5 class="mb-3">社交平台</h5>
                    <p class="text-muted">连接人与人，分享美好生活</p>
                    <div class="d-flex gap-3 mt-4">
                        <a href="#" class="text-white"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-wechat fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-instagram fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-twitter fa-lg"></i></a>
                    </div>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">首页</a></li>
                        <li><a href="#" class="text-muted">会员中心</a></li>
                        <li><a href="#" class="text-muted">发现</a></li>
                        <li><a href="#" class="text-muted">帮助中心</a></li>
                    </ul>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">关于我们</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">平台介绍</a></li>
                        <li><a href="#" class="text-muted">加入我们</a></li>
                        <li><a href="#" class="text-muted">隐私政策</a></li>
                        <li><a href="#" class="text-muted">用户协议</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="mb-3">联系我们</h5>
                    <p class="text-muted mb-3">有任何问题或建议，请随时联系我们</p>
                    <div class="d-flex gap-3 text-muted">
                        <div><i class="fas fa-envelope me-2"></i> support@example.com</div>
                        <div><i class="fas fa-phone me-2"></i> 400-123-4567</div>
                    </div>
                </div>
            </div>
            <div class="border-top border-gray-700 mt-6 pt-6 text-center text-muted">
                <p>&copy; 2023 社交平台 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 粉丝数量范围滑块交互
        const fanRange = document.getElementById('fanRange');
        const fanValue = document.getElementById('fanValue');
        
        fanRange.addEventListener('input', function() {
            const value = this.value;
            let displayText = '';
            
            if (value < 20) {
                displayText = '0 - 1k';
            } else if (value < 40) {
                displayText = '1k - 10k';
            } else if (value < 60) {
                displayText = '10k - 30k';
            } else if (value < 80) {
                displayText = '30k - 50k';
            } else {
                displayText = '50k+';
            }
            
            fanValue.textContent = displayText;
        });
        
        // 排序按钮交互
        document.querySelectorAll('.sort-btn').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.sort-btn').forEach(btn => {
                    btn.classList.remove('active', 'btn-primary');
                    btn.classList.add('btn-outline-secondary');
                });
                
                this.classList.add('active', 'btn-primary');
                this.classList.remove('btn-outline-secondary');
            });
        });
        
        // 关注按钮交互
        document.querySelectorAll('button:contains("关注")').forEach(button => {
            button.addEventListener('click', function() {
                if (this.textContent.includes('关注')) {
                    this.innerHTML = '<i class="fas fa-check me-1"></i>已关注';
                    this.classList.remove('btn-outline-primary');
                    this.classList.add('btn-success');
                } else {
                    this.textContent = '关注';
                    this.classList.remove('btn-success');
                    this.classList.add('btn-outline-primary');
                }
            });
        });
        
        // 搜索标签关闭按钮
        document.querySelectorAll('.search-tag .close').forEach(closeBtn => {
            closeBtn.addEventListener('click', function() {
                this.closest('.search-tag').remove();
            });
        });
        
        // 兴趣标签点击交互
        document.querySelectorAll('.badge.bg-primary.bg-opacity-10.text-primary').forEach(badge => {
            badge.addEventListener('click', function() {
                this.classList.toggle('bg-primary');
                this.classList.toggle('text-white');
            });
        });
    </script>
</body>
</html>
    
